<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="message">hello</div>
<div>
    <button id="btnShow">显示</button>
    <button id="btnHide">隐藏</button>
    <button id="btnToggle">切换</button>

</div>
</body>
<script src="../lib/jquery-3.6.0.js"></script>
<script>

     /*1. 原生JavaScript*/

    var btnShow = document.getElementById('btnShow');
    btnShow.onclick = function () {
      var message=  document.getElementById('message');
      message.style.display = 'block';
    }

    var btnHide = document.getElementById('btnHide');
    btnHide.onclick = function () {
        var message=  document.getElementById('message');
        message.style.display = 'none';
    }

     var btnToggle = document.getElementById('btnToggle');
     btnToggle.onclick = function () {
         var message=  document.getElementById('message');
         if(message.style.display!='none'){
             message.style.display='none'
         }else {
             message.style.display='block'
         }
     }

    /**
     *  2. jQuery : dom
     * */

    $('#btnShow').click(function () {
        $('#message').show();
    })

     $('#btnHide').click(function () {
         $('#message').hide();
     })

     $('#btnToggle').click(function () {
         $('#message').toggle();
     })
</script>

</html>